<template>
  <div class="comment-box">
    <h5>发表评论</h5>
    <hr>
    <textarea maxlength="200" placeholder="说说你的看法~~~" v-model='msg'></textarea>
    <button type="button" class="mui-btn" @click='postComment'>发布</button>
    <div class="mui-content">
      <ul class="mui-table-view mui-table-view-striped mui-table-view-condensed">
        <li class="mui-table-view-cell"  v-for="(item, i) in comments" :key="item.passtime">
          <div class="mui-table">
            <div class="mui-table-cell mui-col-xs-10">
              <h4 class="mui-ellipsis"> {{ item.top_commentsContent ? '此用户很懒，什么都没说': item.top_commentsContent }}</h4>
              <h5>{{i+1}}楼用戶：{{ item.top_commentsName }}</h5>
            </div>
            <div class="mui-table-cell mui-col-xs-2 mui-text-right">
              <span class="mui-h5"> {{item.passtime}} </span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <mt-button type="danger" size="large" plain  @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
  import { Toast } from "mint-ui";


  export default {
    data() {
      return {
        pageIndex: 1,// 默认展示第一页数据
        comments: [],
        msg:''
      };
    },
    created() {
      this.getComments()
    },
    methods: {
      getComments(){
        this.$http.get('https://www.apiopen.top/satinGodApi?type=2&page='+this.pageIndex).then(result=>{
          if (result.body.code === 200) {
            //拼接上新数据
            this.comments = this.comments.concat(result.body.data);
          
          }else {
            Toast('获取评论失败');
          }
          // console.log(result.body);
        })
      },
      getMore(){
        this.pageIndex++;
        this.getComments();
      },
      postComment() {
        if (this.msg.trim().length ===0) {
          return Toast('评论内容不能为空！')
        }
        Toast('暂时没有接口来保存你的评论，(。・＿・。)ﾉI’m sorry~')
      }
    }
  }
</script>
<style scoped>
  textarea {
    margin-bottom: 0px;
  }
  .mui-table-cell .mui-col-xs-2 .mui-text-right {
    width: 42.666667%;
  }
</style>